<template>
    <view class="max-box">
        <up-popup :show="show" :round="14" mode="bottom" @close="close" @open="open">
            <view class="popup_box area">
                <!-- 标题 -->
                <view class="popup_title">{{ popupTitle }}</view>
                <!-- 搜索框 -->
                <view class="search_box" v-if="searchBoxIsShow">
                    <s-search-keyword :placeholder="placeholder" @searchKeyWord="searchKeyWord"></s-search-keyword>
                </view>
                <!-- 列表标题 -->
                <view class="list_title">{{ listingName }}</view>
                <!-- 列表盒子 -->
                <view class="list_box" v-if="arrayList.length != 0">

                    <scroll-view @scrolltolower="PopupScrolltolower" scroll-y enhanced :show-scrollbar="false">
                        <view  @tap="checkProject(item)" v-for="item of arrayList" :key="item.id" :class="selectProject === item.id?'list_item_active':'list_item'">
                            <image :src="`${baseUrl}`+item.logo" mode="scaleToFill" class="bankimg" v-if="isBank" />
                            <view class="project_title">{{ item.title }}</view>
                        </view>

                        <!-- 正在加载组件 -->
                        <view v-if="isPage">
                            <s-loadmore-gather :current_page="current_page" :last_page="last_page" ref="loadmoreRef"
                                @PopupScrolltolower="PopupScrolltolower"></s-loadmore-gather>
                        </view>

                    </scroll-view>
                </view>
                <!-- 缺醒图 -->
                <view class="unawakening_box" v-else>
                    <!-- :textColor="" -->
                    <up-empty :text="' '" :marginTop="61" :width="141" :height="141"
                        :icon="`${baseUrl}/uploads/uniapp_image/staff/kehuguanli_img_nodate@2.png`">
                        <view class="accretion_box">
                            <text>暂无数据</text>
                            <text v-if="showGoLink">？</text>
                            <text v-if="showGoLink" class="accretion" @tap="SwitchAddPage">去添加</text>
                        </view>
                    </up-empty>
                </view>
            </view>

            <!-- 按钮集合盒子 -->
            <view>
                <view class="button_box">
                    <view class="button_item_box">
                        <view class="turn_over" @tap="close">取消</view>
                    </view>
                    <view class="button_item_box">
                        <view class="new_client" @tap="selectBtn">选择</view>
                    </view>
                </view>
                <view class="placeholder"></view>
            </view>
        </up-popup>
    </view>

</template>

<script setup>
    import sheep from '@/sheep';
    import { ref, reactive } from 'vue';
    import { onLoad } from '@dcloudio/uni-app';
    import { baseUrl } from "@/sheep/config";
const props = defineProps({
    // // 名称
    popupTitle: {
        type: String,
        default: ''
    },
    // 列表标题
    listingName: {
        type: String,
        default: ''
    },
    // 是否有新增
    showGoLink: {
        type: String,
        default: ''
    },
    // 传过来的数组列表
    arrayList: {
        type: Array,
        default: []
    },
    // 当前页
    current_page: {
        type: Number,
    },
    // 最后一页
    last_page: {
        type: Number,
    },
    // 是否显示搜索框
    searchBoxIsShow: {
        type: Boolean,
        default: true
    },
    // 是否分页
    isPage: {
        type: Boolean,
        default: true
    },
    // 搜索栏默认文字
    placeholder: {
        type: String,
        default: '搜索项目'
    },
    // 没有数据点击跳转到添加页面
    skipPage: {
        type: String,
        default: ''
    },
    //银行卡
    isBank:{
        type: Boolean,
        default: false
    }

})
    const current_page = ref()
    const last_page = ref()
    // 控制弹出层开关
    const show = ref(false)
    const selectProject = ref(0)
    // 加载更多组件 组件实例
    const loadmoreRef = ref()
    // 传给父组件的title 和 id
    // const project_title = ref('')
    // const project_id = ref()
    const selectData = ref()

    // 选择项目
    const checkProject = (item) => {
        selectProject.value = item.id
        // project_title.value = item.title
        // project_id.value = item.id
        selectData.value = item
    }


    // 打开弹出层
    const open = () => {
        show.value = true
    }

    // 关闭弹出层
    const close = () => {
        show.value = false
    }

    // 搜索
    const searchKeyWord = (srarch_value) => {
        emits('subcomponentSearch',srarch_value)
    }

    // 选择项目
    const selectBtn = () => {
        emits('selectedData',selectData.value)
        close()
    }

    // 跳转添加数据页
    const SwitchAddPage = () => {
    sheep.$router.go(props.skipPage);
    }

    // 项目列表:分页
    const emits = defineEmits(['pageEvent','selectedData','subcomponentSearch']);
    const PopupScrolltolower = () => {
        if (props.isPage) { 
            loadmoreRef.value.PopupScrolltolower()
            emits('pageEvent')
            current_page.value = props.current_page
            last_page.value = props.last_page
        }
       
    };

    

    // 输入框的值
    // const srarch_value = ref('')

    // 点击搜索触发方法 传入输入框的值
    // const emits = defineEmits(['searchKeyWord']);
    // const search = () => {
    //     emits('searchKeyWord',srarch_value.value)
    // }

    // 暴露子组件属性或方法
    defineExpose({
        open,
        close,
    })

</script>

<style lang="scss" scoped>

    .area {
        margin: 0 40rpx;
    }

    // 内容盒子
    .popup_box {
        height: 60vh;
        // 标题
        .popup_title {
            margin: 30rpx 0;
            height: 56rpx;
            width: 100%;
            text-align: center;
            font-family: PingFangSC;
            color: $uni-text-color;
            font-weight: $uni-font-weight;
            font-size: 40rpx;
            font-style: normal;
            text-decoration: none;
        }
        // 搜索盒子
        .search_box {
            margin-bottom: 20rpx;
        }
        // 列表标题
        .list_title {
            color: $uni-text-color;
            font-weight: 500;
            font-size: $uni-font-size-base;
            height: 100rpx;
            display: flex;
            align-items: center;
            margin-left: 5rpx;
        }
        // 列表盒子
        .list_box {
            width: 100%;
            height: 70%;
            background-color: #ffffff;
            // 列表项
            .list_item {
                width: 95%;
                height: 100rpx;
                border-radius: 16rpx;
                background-color: #F8F8F8;
                display: flex;
                align-items: center;
                margin-bottom: 28rpx;
                padding-left: 4%;
                // 列表项图片盒子
                .check_image {
                    width: 36rpx;
                    height: 36rpx;
                    margin-right: 20rpx;
                    image {
                        width: 100%;
                        height: 100%;
                    }
                }
                // 项目名称
                .project_title {
                    color: #666666;
                    font-weight: 500;
                    font-size: 30rpx;
                    padding-left: 20rpx;
                }
            }
            .list_item_active{
                width: 95%;
                height: 100rpx;
                border-radius: 16rpx;
                background-color: #F9FBFF;
                border: 1rpx solid $uni-color-primary;
                display: flex;
                align-items: center;
                margin-bottom: 28rpx;
                padding-left: 4%;
                // 列表项图片盒子
                .check_image {
                    width: 36rpx;
                    height: 36rpx;
                    margin-right: 20rpx;
                    image {
                        width: 100%;
                        height: 100%;
                    }
                }
                // 项目名称
                .project_title {
                    color: $uni-color-primary;
                    font-weight: 500;
                    font-size: 30rpx;
                    padding-left: 20rpx;
                   
                }
            }
        }
    }


    // 按钮集合大盒子
    .button_box {
        background-color: #ffffff;
        display: flex;
        height: 128rpx;
        width: 100%;
        justify-content: space-between;
        .button_item_box {
            width: calc(50% - 60rpx);
            padding: 18rpx 30rpx 20rpx 30rpx;
                // 取消按钮
            .turn_over {
                width: 315rpx;
                height: 90rpx;
                border-radius: 45rpx;
                border: 2rpx solid $uni-color-primary;
                font-family: PingFangSC;
                color: $uni-color-primary;
                font-weight: $uni-font-weight;
                font-size: 34rpx;
                font-style: normal;
                text-decoration: none;
                text-align: center;
                line-height: 90rpx;
            }
            // 选择项目按钮
            .new_client {
                width: 315rpx;
                height: 92rpx;
                border-radius: 45rpx;
                background: linear-gradient(90deg, rgba(0, 56, 247, 1) 0%, rgba(77, 139, 255, 1) 100%);
                font-family: PingFangSC;
                color: #FFFFFF;
                font-weight: $uni-font-weight;
                font-size: 34rpx;
                font-style: normal;
                text-decoration: none;
                text-align: center;
                line-height: 92rpx;
            }
        }
    }

    // 占位盒子
    .placeholder {
        height: 32rpx;
        width: 100%;
        background-color: #ffffff;
    }

    // 缺醒图盒子
    .unawakening_box {
        border-top: 2rpx solid #efefef;
        // 插槽盒子
        .accretion_box {
            width: 100%;
            height: 35rpx;
            font-family: PingFangSC;
            font-weight: $uni-font-weight;
            font-size: $uni-font-size-sm;
            font-style: normal;
            text-decoration: none;
            text-align: center;
            line-height: 35rpx;
            color: #c0c4cc;
            .accretion {
                color: $uni-color-primary;
            }
        }
    }


    scroll-view {
        height: 100%;
    }
   //银行卡图片
   .bankimg{
    width: 50rpx;
    height: 50rpx;
    border-radius: 50%;
    margin-right: 10rpx;
   }
</style>